<html>
<head>
<style type="text/css" media="screen">
  @keyframes test1 {
    from { left: 10px; }
    to { left: 20px; }
  }
  @keyframes test2 {
    from { left: 10px; }
    to { left: 20px; }
    30% { left: 30px; }
    60% { left: 60px; }
    20% { left: 50px; }
  }
  @keyframes test3 {
    0% { left: 10px; }
    50% , 60% { left: 30px; }
    -10% { left: 50px; }
    90%, 100% { left: 20px; }
  }
  @keyframes test4 {
    from { left: 10px; }
    50% { left: 30px; }
    to { left: 20px; }
  }
  @keyframes test5 {
    0% { left: 10px; }
    50% , 60% { left: 30px; }
    90%, 100% { left: 20px; }
  }
  @keyframes test6 {
    from { left: 10px; }
    50% { left: 30px; }
    to { left: 20px; }
  }
  @keyframes test7 {
    0% { left: 10px; }
    90%, 100% { left: 20px; }
  }
  @keyframes test8 {
    0% { left: 10px; }
    90%, 100% { left: 20px; }
  }
  @keyframes test9 {
    0% { left: 10px; }
    90%, 100% { left: 20px; }
  }
  @keyframes test10 {
    0% { left: 10px; }
    90%, 100% { left: 20px; }
  }
  @keyframes test11 {
    0% { left: 10px; }
    90%, 100% { left: 20px; }
  }
  @keyframes test12 {
    0% { left: 10px; }
    90%, 100% { left: 20px; }
  }
  @keyframes test13 {
    0% { left: 10px; }
    90%, 100% { left: 20px; }
  }
</style>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<script>
test(() => {
  assert_own_property(window, "CSSKeyframeRule", "CSSKeyframeRule exists on Window object");

  assert_own_property(window, "CSSKeyframesRule", "CSSKeyframesRule exists on Window object");

  assert_not_own_property(window.CSSRule, "WEBKIT_KEYFRAME_RULE", "WEBKIT_KEYFRAME_RULE does not exist on Window.CSSRule object");

  assert_not_own_property(window.CSSRule, "WEBKIT_KEYFRAMES_RULE", "WEBKIT_KEYFRAMES_RULE does not exist on Window.CSSRule object");

  assert_own_property(window.CSSRule, "KEYFRAME_RULE", "KEYFRAME_RULE exists on Window.CSSRule object");

  assert_own_property(window.CSSRule, "KEYFRAMES_RULE", "KEYFRAMES_RULE exists on Window.CSSRule object");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Constants");

test(() => {
  var keyframes1 = document.styleSheets.item(0).cssRules.item(0);
  assert_equals(keyframes1.type, window.CSSRule.KEYFRAMES_RULE);
  assert_equals(keyframes1.name, "test1");

  var rules1 = keyframes1.cssRules;
  assert_equals(rules1.length, 2);
  assert_equals(rules1.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules1.item(0).cssText, "0% { left: 10px; }");
  assert_equals(rules1.item(1).cssText, "100% { left: 20px; }");

  keyframes1.appendRule("30% { left: 30px; }");
  keyframes1.appendRule("60% { left: 60px; }");
  keyframes1.appendRule("20% { left: 50px; }");

  assert_equals(rules1.length, 5);
  assert_equals(rules1.item(0).cssText, "0% { left: 10px; }");
  assert_equals(rules1.item(1).cssText, "100% { left: 20px; }");
  assert_equals(rules1.item(2).cssText, "30% { left: 30px; }");
  assert_equals(rules1.item(3).cssText, "60% { left: 60px; }");
  assert_equals(rules1.item(4).cssText, "20% { left: 50px; }");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Basic queries and Insert new rules");

test(() => {
  var keyframes2 = document.styleSheets.item(0).cssRules.item(1);
  keyframes2.appendRule("foo");
  keyframes2.appendRule("foo { left: 30px; }");
  keyframes2.appendRule("-10% { left: 30px; }");
  keyframes2.appendRule("10% { left: 30px; }");

  var rules2 = keyframes2.cssRules;
  assert_equals(rules2.length, 6);
  assert_equals(rules2.item(5).cssText, "10% { left: 30px; }");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Insert invalid rules");

test(() => {
  var keyframes3 = document.styleSheets.item(0).cssRules.item(2);
  assert_equals(keyframes3.type, window.CSSRule.KEYFRAMES_RULE);
  assert_equals(keyframes3.name, "test3");

  var rules3 = keyframes3.cssRules;
  assert_equals(rules3.length, 3);
  assert_equals(rules3.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules3.item(0).keyText, "0%");
  assert_equals(rules3.item(1).keyText, "50%, 60%");
  assert_equals(rules3.item(2).keyText, "90%, 100%");
  assert_equals(rules3.item(0).cssText, "0% { left: 10px; }");
  assert_equals(rules3.item(1).cssText, "50%, 60% { left: 30px; }");
  assert_equals(rules3.item(2).cssText, "90%, 100% { left: 20px; }");

  assert_class_string(rules3.item(0).style, "CSSStyleDeclaration");
  assert_equals(rules3.item(0).style.length, 1);

  var rule = keyframes3.findRule("0%");

  assert_class_string(rule, "CSSKeyframeRule", "Should be able to extract '0%' keyframe rule");
  assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rule.cssText, "0% { left: 10px; }");

  var rule = keyframes3.findRule("50%, 60%");

  assert_class_string(rule, "CSSKeyframeRule", "Should be able to extract '50%,60%' keyframe rule");
  assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rule.cssText, "50%, 60% { left: 30px; }");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Keys, Find a rule and Find a rule with multiple key values");

test(() => {
  var keyframes4 = document.styleSheets.item(0).cssRules.item(3);
  assert_equals(keyframes4.type, window.CSSRule.KEYFRAMES_RULE);

  rule = keyframes4.findRule("From");
  assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rule.cssText, "0% { left: 10px; }");

  rule = keyframes4.findRule("TO");
  assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rule.cssText, "100% { left: 20px; }");

  rule = keyframes4.findRule("70%");

  assert_equals(rule, null, "Should not be able to find the non-existent ''70%' keyframe rule");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Find a rule using from and to and Try to find a rule that doesn't exist");

test(() => {
  var keyframes5 = document.styleSheets.item(0).cssRules.item(4);
  keyframes5.deleteRule("50%,60%");
  var rules5 = keyframes5.cssRules;
  assert_equals(rules5.length, 2);
  assert_equals(rules5.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules5.item(0).keyText, "0%");
  assert_equals(rules5.item(1).keyText, "90%, 100%");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Delete a rule");

test(() => {
  var keyframes6 = document.styleSheets.item(0).cssRules.item(5);
  keyframes6.deleteRule("0%");
  var rules6 = keyframes6.cssRules;
  assert_equals(rules6.length, 2);
  assert_equals(rules6.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules6.item(0).keyText, "50%");
  assert_equals(rules6.item(1).keyText, "100%");
}, 'This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Delete a from rule');

test(() => {
  var keyframes7 = document.styleSheets.item(0).cssRules.item(6);
  keyframes7.deleteRule("70%");
  var rules7 = keyframes7.cssRules;
  assert_equals(rules7.length, 2);
  assert_equals(rules7.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules7.item(0).keyText, "0%");
  assert_equals(rules7.item(1).keyText, "90%, 100%");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Delete a rule that doesn't exist");

test(() => {
  var rules8 = document.styleSheets.item(0).cssRules.item(7).cssRules;
  rules8.item(0).keyText = "70%";
  assert_equals(rules8.length, 2);
  assert_equals(rules8.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules8.item(0).keyText, "70%");
  assert_equals(rules8.item(1).keyText, "90%, 100%");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key");

test(() => {
  var rules9 = document.styleSheets.item(0).cssRules.item(8).cssRules;
  rules9.item(0).keyText = "from";
  assert_equals(rules9.length, 2);
  assert_equals(rules9.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules9.item(0).keyText, "0%");
  assert_equals(rules9.item(1).keyText, "90%, 100%");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with 'from'");

test(() => {
  var rules10 = document.styleSheets.item(0).cssRules.item(9).cssRules;
  rules10.item(0).keyText = "0%, 10%, from, 20%, 30%, to";
  assert_equals(rules10.length, 2);
  assert_equals(rules10.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules10.item(0).keyText, "0%, 10%, 0%, 20%, 30%, 100%");
  assert_equals(rules10.item(1).keyText, "90%, 100%");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with multiple values");

test(() => {
  var rules11 = document.styleSheets.item(0).cssRules.item(10).cssRules;
  assert_throws_dom('SyntaxError', () => {rules11.item(0).keyText = "40%, -50%, 60%";}, "The key '40%, -50%, 60%' is invalid and cannot be parsed");
  assert_equals(rules11.length, 2);
  assert_equals(rules11.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules11.item(0).keyText, "0%");
  assert_equals(rules11.item(1).keyText, "90%, 100%");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with an out-of-range value");

test(() => {
  var rules12 = document.styleSheets.item(0).cssRules.item(11).cssRules;
  assert_throws_dom('SyntaxError', () => {rules12.item(0).keyText = "foo";}, "The key 'foo' is invalid and cannot be parsed");
  assert_equals(rules12.length, 2);
  assert_equals(rules12.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules12.item(0).keyText, "0%");
  assert_equals(rules12.item(1).keyText, "90%, 100%");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with an invalid value");

test(() => {
  var rules13 = document.styleSheets.item(0).cssRules.item(12).cssRules;
  assert_throws_dom('SyntaxError', () => {rules13.item(0).keyText = null;}, "The key 'null' is invalid and cannot be parsed");
  assert_equals(rules13.length, 2);
  assert_equals(rules13.item(0).type, window.CSSRule.KEYFRAME_RULE);
  assert_equals(rules13.item(0).keyText, "0%");
  assert_equals(rules13.item(1).keyText, "90%, 100%");
}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with a null value");

</script>
</body>
</html>
